<template>
  <div class="header-box">
    <el-row>
      <el-col :span="3">
        <i class="el-icon-arrow-left" @click="toRoute"></i>
      </el-col>
      <el-col :span="18" class="input">
        <el-input placeholder="商品名" prefix-icon="el-icon-search" clearable size="small"></el-input>
      </el-col>
      <el-col :span="3"></el-col>
    </el-row>
  </div>
</template>
  
  <script>
export default {
  name: "ClassifyHeader",
  methods: {
    toRoute() {
      this.$router.go(-1);
    }
  }
};
</script>
  
  <style lang="less" scoped>
.header-box {
  height: 100%;
  border-bottom: 2px solid #f1f1f1;
}
.el-row {
  height: 100%;
}
.el-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.input {
  padding: 1.6vw 0;
}
.el-icon-arrow-left {
  font-size: 5.8666vw;
  font-weight: bold;
  color: #6b6d77;
}
/deep/ .el-input__inner {
  border-color: transparent;
  background-color: #f7f7f7;
  border-radius: 5.3333vw;
}
</style>